import React, { Component } from 'react';
import { StyleSheet, View, DeviceEventEmitter, Text, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
import InspectionList from './inspection-list';
import Info from './info';
import Search from './search';
import Theme from '../../../native-base-theme/variables/commonColor';

const deviceWidth = Dimensions.get('window').width;

class Inspection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showInfo: true,
      showSearch: true,
    };
  }

  componentDidMount() {
    global.mainIndex = 1;
    DeviceEventEmitter.addListener('swiperIncidentPageEvent', this.swiperPage);
    DeviceEventEmitter.addListener('swiperInfoPageEvent', this.swiperInfoPage);
    DeviceEventEmitter.addListener('showInfoPageEvent', this.showInfoPageEvent);
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('swiperIncidentPageEvent');
    DeviceEventEmitter.removeAllListeners('swiperInfoPageEvent');
    DeviceEventEmitter.removeAllListeners('showInfoPageEvent');
  }

  swiperPage = (index) => {
    if (this._Swiper) {
      this._Swiper.scrollBy(index);
    }
  }

  swiperInfoPage = (index) => {
    if (this._InfoSwiper) {
      this._InfoSwiper.scrollBy(index);
    }
  }

  showInfoPageEvent = (showInfo) => {
    this.setState({ showInfo });
  }

  _indexChange = (pageIndex) => {
    DeviceEventEmitter.emit('showTopBarEvent', 'hide');
    global.mainIndex = pageIndex;
    if (pageIndex == '0') { // go to seatch
      DeviceEventEmitter.emit('swipeToInpectionSearch', 'data');
    } else if (pageIndex == '1') { // go to list
      console.log('back to list!');
    }
  }

  _indexInfoChange = (pageIndex) => {
    DeviceEventEmitter.emit('showTopBarEvent', 'hide');
    if (pageIndex == 1) {
      this.setState({ showSearch: false });
    } else {
      this.setState({ showSearch: true });
    }
    // global.mainIndex = pageIndex;
    if (pageIndex == '1') { // go to detail
      const { list } = this._inspectionList.state;
      const { index } = this._inspectionList;
      DeviceEventEmitter.emit('swipeToInpectionDetail', list[index]);
    } else if (pageIndex == '0') { // go to list
      console.log('back to list!');
    }
  }

  _Swiper;

  _inspectionList;

  render() {
    return (
      <View style={styles.container}>
        <Swiper
          ref={(ref) => {
            this._Swiper = ref;
          }}
          style={{ width: deviceWidth }}
          horizontal
          showsPagination={false}
          index={1}
          onIndexChanged={(index) => this._indexChange(index)}
          loop={false}
          showInfo={this.state.showInfo}
          scrollEnabled={this.state.showSearch}
        >
          <View style={styles.slide}>
            <Search />
          </View>
          <View style={styles.slide}>
            <Swiper
              ref={(ref) => {
                this._InfoSwiper = ref;
              }}
              style={{ width: deviceWidth }}
              horizontal
              showsPagination={false}
              index={0}
              loop={false}
              onIndexChanged={(index) => this._indexInfoChange(index)}
              scrollEnabled={this.state.showInfo}
            >
              <View style={styles.slide}>
                <InspectionList ref={(ref) => { this._inspectionList = ref; }} />
              </View>
              <View style={styles.slide}>
                <Info />
              </View>
            </Swiper>
          </View>
        </Swiper>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  slide: {
    flex: 1,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Theme.myPrimary,
  },
});

export default Inspection;
